<template>
    <div>
        <Card>
            {{remarkInput}}
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="组团">
                        <div class="filters-input">
                            <el-select v-model="filters.groupName" filterable placeholder="请选择组团" clearable
                                       no-data-text="暂无数据" @change="groupNamechange">
                                <el-option v-for="item in groupNameList" :key="item.label" :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="楼栋">
                        <div class="filters-input">
                            <el-select v-model="filters.building" @change="buildingchange" placeholder="请选择楼栋"
                                       filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in buildList" :value="item.label"
                                           :key="item.label"
                                           :label="item.label"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="单元">
                        <div class="filters-input">
                            <el-select v-model="filters.unit" @change="unitchange" placeholder="请选择单元" filterable
                                       clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in unitList" :value="item.label" :key="item.label"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="房间">
                        <div class="filters-input">
                            <el-select v-model="filters_room" placeholder="请选择房间号" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in roomList" :value="item.label" :key="item.label"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="费用类型">
                        <div class="filters-input">
                            <el-select v-model="filters.costTypeId" placeholder="请选择费用类型" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in costType" :value="item.id" :key="item.id" :label="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem>
                        <ButtonGroup>
                            <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>

                            <Button type="warning" icon="md-share-alt" @click="exportExcel()">导出未缴账单</Button>
                        </ButtonGroup>
                    </FormItem>
                </Form>
                <!--功能按钮-->
                <template>
                    <Button type="primary" icon="md-add" @click="handleAdd()" style="margin:5px 5px">
                        新增
                    </Button>
                    <Button type="primary" icon="md-trash" @click="deleteBillAll()"
                            style="margin:5px 5px">
                        批量删除
                    </Button>
                    <Tooltip content="请先下载模板">
                        <Button type="warning" icon="ios-undo" @click="importBill()" style="margin:5px 5px">
                            导入账单
                        </Button>
                    </Tooltip>
                    <Button type="info" icon="md-download" @click="download()"
                            style="margin:5px 5px">
                        下载模板
                    </Button>
                    <Tooltip content="获取融科物业账单" placement="top">
                        <Button type="primary" icon="md-sync" @click="tbrkBill = true" style="margin:5px 5px">
                            同步账单
                        </Button>
                    </Tooltip>
                    <Button type="success" icon="logo-buffer" @click="batchBill=true" style="margin:5px 5px">
                        批量生成账单
                    </Button>
                </template>
            </Row>

            <Row>
                <div class="moneybox">
                    <Icon type="ios-information-circle-outline" color="red" size="16px"/>
                    <span>未缴费总额：<em>{{money.unpaidAmount}}元</em></span>
                </div>
            </Row>

            <el-table stripe border v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange"
                      ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="ownerName" label="业主名"></el-table-column>
                <el-table-column label="住址">
                    <template slot-scope="scope">
                        {{scope.row.housingName}}/{{scope.row.groupName || " "}}/{{scope.row.building ||
                        ""}}/{{scope.row.unit||" "}}/{{scope.row.room}}
                    </template>
                </el-table-column>
                <el-table-column prop="costTypeName" label="费用类型"></el-table-column>
                <el-table-column prop="accountPeriod" label="账期"></el-table-column>
                <el-table-column prop="amount" label="应收金额"></el-table-column>
                <el-table-column prop="startDay" label="出账日期"></el-table-column>
                <el-table-column prop="endDay" label="缴费截止日期"></el-table-column>
                <el-table-column label="操作" align="center" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="lyModify(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="lyDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :title="modal && modal.id ? '修改' : '新增'" width="900" class="modal-content"
               :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="formModal" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <Row>
                    <FormItem label="小区" prop="housingId">
                        <el-select v-model="modal.housingId" @change="housechange" filterable placeholder="请选择小区"
                                   no-data-text="暂无数据" style="width: 100%" clearable>
                            <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="组团" prop="groupName">
                        <el-select v-model="modal.groupName" @change="groupNamechange" filterable placeholder="请选择组团"
                                   no-data-text="暂无数据" style="width: 100%" clearable>
                            <el-option v-for="item in groupNameList" :value="item.label" :key="item.label"
                                       :label="item.label"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="楼栋" prop="building">
                        <el-select v-model="modal.building" @change="buildingchange" filterable placeholder="请选择楼栋"
                                   no-data-text="暂无数据" style="width: 100%" clearable>
                            <el-option v-for="item in buildList" :value="item.label" :key="item.label"
                                       :label="item.label"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="单元" prop="unit">
                        <el-select v-model="modal.unit" @change="unitchange" filterable placeholder="请选择单元"
                                   no-data-text="暂无数据" style="width: 100%" clearable>
                            <el-option v-for="item in unitList" :value="item.label" :key="item.label"
                                       :label="item.label"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="房间号" prop="selectRoom">
                        <el-select v-model="modal.selectRoom" filterable placeholder="请选择房间号"
                                   no-data-text="暂无数据" style="width: 100%" clearable>
                            <el-option v-for="item in roomList" :value="item.label" :key="item.label"
                                       :label="item.label"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="费用类型" prop="selectCostTypeId">
                        <el-select v-model="modal.selectCostTypeId" filterable placeholder="请选择费用类型"
                                   no-data-text="暂无数据" style="width: 100%" clearable>
                            <el-option v-for="item in costType" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>

                    <FormItem label="账期" prop="accountPeriod">
                        <!--<DatePicker v-model="modal.accountPeriod" type="month" placeholder="yyyy年MM"-->
                        <!--style="width: 100%"></DatePicker>-->
                        <Input v-model="modal.accountPeriod" placeholder="yyyy年MM"></Input>
                    </FormItem>
                    <FormItem label="出账日期" prop="startDay">
                        <DatePicker v-model="modal.startDay" type="date" placeholder="yyyyMMdd"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                    <FormItem label="截止缴费日期" prop="endDay">
                        <DatePicker v-model="modal.endDay" type="date" placeholder="yyyyMMdd"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                    <FormItem label="账单金额" prop="amount">
                        <Input v-model="modal.amount" placeholder="账单金额"></Input>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>


        <Modal v-model="modifyVisible" title="修改" width="900" class="modal-content" :mask-closable="false">
            <Form :model="modifyModal" :rules="rule" ref="modifyModal" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <Row>
                    <FormItem label="账期" prop="accountPeriod">
                        <!--<DatePicker v-model="modal.accountPeriod" type="month" placeholder="yyyy年MM" style="width: 100%"></DatePicker>-->
                        <Input v-model="modifyModal.accountPeriod" placeholder="yyyy年MM"></Input>
                    </FormItem>
                    <FormItem label="出账日期" prop="startDay">
                        <DatePicker v-model="modifyModal.startDay" type="date" placeholder="yyyyMMdd"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                    <FormItem label="截止缴费日期" prop="endDay">
                        <DatePicker v-model="modifyModal.endDay" type="date" placeholder="yyyyMMdd"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                    <FormItem label="账单金额" prop="amount">
                        <Input v-model="modifyModal.amount" placeholder="账单金额"></Input>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="modifySure(allInof)" :loading="formLoading">确定</Button>
            </div>
        </Modal>


        <Modal v-model="formDeleteVisible" title="删除条件" width="900" class="modal-content"
               :mask-closable="false">
            <Form :model="modalDelete" :rules="rule" ref="formDelete" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <Row>
                    <FormItem label="小区">
                        <el-select v-model="modalDelete.housingId" @change="housechange" filterable placeholder="请选择小区"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="组团">
                        <el-select v-model="modalDelete.groupName" @change="groupNamechange" filterable
                                   placeholder="请选择组团"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in groupNameList" :value="item.label" :key="item.label"
                                       :label="item.label"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="楼栋">
                        <el-select v-model="modalDelete.building" @change="buildingchange" filterable
                                   placeholder="请选择楼栋"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in buildList" :value="item.label" :key="item.label"
                                       :label="item.label"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="单元">
                        <el-select v-model="modalDelete.unit" @change="unitchange" filterable placeholder="请选择单元"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in unitList" :value="item.label" :key="item.label"
                                       :label="item.label"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="房间号">
                        <Select v-model="modalDelete_room" filterable placeholder="请选择房间号"
                                no-data-text="暂无数据" style="width: 100%">
                            <Option v-for="item in roomList" :value="item.label" :key="item.label"
                                    :label="item.label"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label="费用类型">
                        <el-select v-model="modalDelete.costTypeId" filterable clearable placeholder="请选择费用类型"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in costType" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="deleteBillAllSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>


        <Modal v-model="modalImportBill" title="导入账单" class="modal-content" :mask-closable="false">
            <Form :model="filemodal" :rules="rule" ref="fileform" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <FormItem label="小区" prop="housingId">
                    <el-select v-model="filemodal.housingId" @change="housechange" filterable placeholder="请选择小区"
                               no-data-text="暂无数据" style="width: 100%">
                        <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                   :label="item.name"></el-option>
                    </el-select>
                </FormItem>
                <FormItem label="上传文件">
                    <el-upload class="upload-demo" :data="dataFile" ref="upload" :action="act"
                               :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
                               :auto-upload="false" accept=".xlsx,.xls,.csv" :headers="{'x-access-token':token}"
                               :on-success="filesuccess" :on-error="filefail" :limit="1" :multiple="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传.xlsx/.xls/.csv文件</div>
                    </el-upload>
                </FormItem>
                <!--<FormItem label="温馨提示" style="color: grey;">点击确定后由于加载时间较长，会先关闭当前窗口，加载消息会出现在右侧不会影响您的其他使用</FormItem>-->
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="submitUpload" :loading="formLoading">确定</Button>
            </div>
        </Modal>

        <Modal v-model="tbrkBill" title="获取融科物业账单" width="900" class="modal-content"
               :mask-closable="false">
            <Form :model="synchronousBill" :rules="rule" ref="synchronousBill" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <Row>
                    <FormItem label="小区" prop="housingId">
                        <el-select v-model="synchronousBill.housingId" @change="housechange" filterable clearable
                                   placeholder="请选择小区"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="">
                        关闭本页面不会影响账单同步！
                    </FormItem>

                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="submitSynchronous" :loading="formLoading">确定</Button>
            </div>
        </Modal>

        <Modal v-model="batchBill" title="批量生成账单" width="900" class="modal-content"
               :mask-closable="false">
            <Form :model="billList" :rules="rule" ref="billList" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <Row>
                    <FormItem label="小区" prop="housingId">
                        <el-select v-model="billList.housingId" @change="housechange" filterable clearable
                                   placeholder="请选择小区"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="费用类型" prop="id">
                        <el-select v-model="billList.id" filterable clearable placeholder="请先选择小区再选择费用类型"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in costType" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="月数" prop="months">
                        <el-select v-model="billList.months" filterable clearable placeholder="请选择月数"
                                   no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in monthsList" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="账期" prop="accountPeriod">
                        <Input v-model="billList.accountPeriod" placeholder="yyyy年MM"/>
                    </FormItem>
                    <FormItem label="截止缴费日期" prop="endDay">
                        <DatePicker v-model="billList.endDay" type="date"
                                    placeholder="yyyyMMdd"
                                    style="width: 100%"></DatePicker>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="handlebill" :loading="formLoading">确定</Button>
            </div>
        </Modal>

        <Modal v-model="loadMode" title="导入账单" width="450" class="modal-content" :mask-closable="false">
            <div class="moneybox tips">
                <Icon type="ios-information-circle-outline" color="red" size="16px"/>
                <span>关闭弹窗不影响导入操作</span>
            </div>
            <div class="info" v-loading="loadingInfo"></div>
            <p class="p-info">正在导入{{msgInfo.housingName||'--'}}账单（{{msgInfo.son ||'--'}}/{{msgInfo.total
                ||'--'}}），请稍等...</p>
            <div slot="footer">
                <Button type="primary" @click="btnSure">确定</Button>
            </div>
        </Modal>

        <Modal v-model="loadBatchMode" title="批量生成" width="450" class="modal-content" :mask-closable="false">
            <div class="moneybox tips">
                <Icon type="ios-information-circle-outline" color="red" size="16px"/>
                <span>关闭弹窗不影响导入操作</span>
            </div>
            <div class="info" v-loading="loadingInfo"></div>
            <p class="p-info">正在导入（{{batchInfo.son ||'--'}}/{{batchInfo.total
                ||'--'}}批次号{{batchInfo.batchId||'--'}}），请稍等...</p>
            <div slot="footer">
                <Button type="primary" @click="btnSure">确定</Button>
            </div>
        </Modal>
    </div>
</template>


<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";

    const token = Cookies.get(TOKEN_KEY);
    //线上上传账单地址
    const act = baseURL + "/api/bill/upload";
    //校验规则
    const rules = {
        remark: [
            {
                required: true,
                message: "请输入备注"
            }
        ],
        housingId: [
            {
                required: true,
                message: "请选择小区"
            }
        ],
        id: [
            {
                required: true,
                message: "请先选择小区再选择费用类型"
            }
        ],
        room: [
            {
                required: true,
                message: "请选择房间"
            }
        ],
        selectRoom: [
            {
                required: true,
                message: "请选择房间"
            }
        ],
        costTypeId: [
            {
                required: true,
                message: "请选择费用类型"
            }
        ],
        selectCostTypeId: [
            {
                required: true,
                message: "请选择费用类型"
            }
        ],
        accountPeriod: [
            {
                required: true,
                message: "请输入账期"
            }
        ],
        startDay: [
            {
                required: true,
                message: "请选择出账日期"
            }
        ],
        endDay: [
            {
                required: true,
                message: "请选择截止缴费日期"
            }
        ],
        amount: [
            {
                required: true,
                message: "请填写金额"
            }
        ],
        payType: [
            {
                required: true,
                message: "请选择付款方式"
            }
        ],
        wwkpayType: [
            {
                required: true,
                message: "请选择付款方式"
            }
        ],
        months: [
            {
                required: true,
                message: "请选择月数"
            }
        ],
    };

    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.room = this.filters_room;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;

        console.log(params)

        //与后台交换数据
        this.postRequest("/api/bill/loadData", params).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.pageInfo.list;
                this.pageTotal = res.data.pageInfo.total;
                this.money = res.data.money;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //加载费用类型
    let getCostType = function (value) {
        this.getRequest(
            "/api/costType/getCostTypeByhousingId?housingId=" + value
        ).then(res => {
            // console.log(res);
            if (res.code == 20000) {
                this.costType = res.data;
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //加载小区
    let gethouse = function () {
        let url = "/api/housing/getHousingByLogin";
        this.postRequest(url).then(res => {
            this.houseList = res;
            this.filters.housingId = res[0].id;
            this.getCostType(this.filters.housingId);
            this.housechange(this.filters.housingId);
            this.loadData();
        });
    };
    //选择小区，加载组团
    let housechange = function (value) {
        this.getCostType(value);
        this.groupNameList = [];
        this.buildList = [];
        this.unitList = [];
        this.roomList = [];
        this.filters.groupName = "";
        this.filters.building = "";
        this.filters.unit = "";
        this.filters_room = "";
        this.modal.groupName = "";
        this.modal.building = "";
        this.modal.unit = "";
        this.modal.room = "";
        this.modal.costTypeId = null;
        this.modalDelete.groupName = "";
        this.modalDelete.building = "";
        this.modalDelete.unit = "";
        this.modalDelete_room = "";
        this.getRequest("/api/room/queryGroupName?housingId=" + value).then(res => {
            // console.log(res)
            if (res.data.groupList != null) {
                this.groupNameList = res.data.groupList;
            } else if (res.data.buildList != null) {
                this.buildList = res.data.buildList;
            } else if (res.data.unitList != null) {
                this.unitList = res.data.unitList;
            } else {
                this.roomList = res.data.roomList;
            }
        });
    };
    //选择组团，加载楼栋
    let groupNamechange = function (value) {
        this.buildList = [];
        this.unitList = [];
        this.roomList = [];
        this.filters.building = "";
        this.filters.unit = "";
        this.filters_room = "";
        this.modal.building = "";
        this.modal.unit = "";
        this.modal.room = "";
        this.modalDelete.building = "";
        this.modalDelete.unit = "";
        this.modalDelete_room = "";
        let url;
        if (this.filters.groupName) {
            //查询条件
            url =
                "/api/room/queryBuilding?groupName=" +
                value +
                "&housingId=" +
                this.filters.housingId;
        } else if (this.modal.groupName) {
            //新增账单
            url =
                "/api/room/queryBuilding?groupName=" +
                value +
                "&housingId=" +
                this.modal.housingId;
        } else {
            //批量删除账单
            url =
                "/api/room/queryBuilding?groupName=" +
                value +
                "&housingId=" +
                this.modalDelete.housingId;
        }
        this.getRequest(url).then(res => {
            // console.log(res)
            if (res.data.buildList != null) {
                this.buildList = res.data.buildList;
            } else if (res.data.unitList != null) {
                this.unitList = res.data.unitList;
            } else {
                this.roomList = res.data.roomList;
            }
        });
    };
    //选楼栋，加载单元
    let buildingchange = function (value) {
        this.unitList = [];
        this.roomList = [];
        this.filters.unit = "";
        this.filters_room = "";
        this.modal.unit = "";
        this.modal.room = "";
        this.modalDelete.unit = "";
        this.modalDelete_room = "";
        let url = "/api/room/queryUnit";
        let params = {};
        if (this.filters.building) {
            //查询条件
            params.building = value;
            params.housingId = this.filters.housingId;
            params.groupName = this.filters.groupName;
        } else if (this.modal.building) {
            //新增账单
            params.building = value;
            params.housingId = this.modal.housingId;
            params.groupName = this.modal.groupName;
        } else {
            //批量删除账单
            params.building = value;
            params.housingId = this.modalDelete.housingId;
            params.groupName = this.modalDelete.groupName;
        }
        // console.log(params)
        this.postRequest(url, params).then(res => {
            // console.log(res)
            if (res.data.unitList != null) {
                this.unitList = res.data.unitList;
            } else {
                this.roomList = res.data.roomList;
            }
        });
    };
    //选择单元加载房间
    let unitchange = function (value) {
        this.roomList = [];
        this.filters_room = "";
        this.modal.room = "";
        this.modalDelete_room = "";
        let url;
        if (this.filters.unit) {
            //查询条件
            url =
                "/api/room/queryRoom?unit=" +
                value +
                "&housingId=" +
                this.filters.housingId +
                "&groupName=" +
                this.filters.groupName +
                "&building=" +
                this.filters.building;
        } else if (this.modal.unit) {
            //新增账单
            url =
                "/api/room/queryRoom?unit=" +
                value +
                "&housingId=" +
                this.modal.housingId +
                "&groupName=" +
                this.modal.groupName +
                "&building=" +
                this.modal.building;
        } else {
            //批量删除账单
            url =
                "/api/room/queryRoom?unit=" +
                value +
                "&housingId=" +
                this.modalDelete.housingId +
                "&groupName=" +
                this.modalDelete.groupName +
                "&building=" +
                this.modalDelete.building;
        }
        this.getRequest(url).then(res => {
            // console.log(res)
            this.roomList = res.data.roomList;
        });
    };

    //打开新增修改页面
    let handleAdd = function (id) {
        this.$refs["formModal"].resetFields();
        this.groupNameList = [];
        this.buildList = [];
        this.unitList = [];
        this.roomList = [];
        this.modal.selectRoom = "";
        this.modal.room = "";
        this.formVisible = true;
    };

    //保存
    let handleSubmit = function () {
        this.$refs["formModal"].validate(valid => {
            if (valid) {
                this.save();
            }
        });
    };
    //保存
    let save = function () {
        let parms = this.modal;
        parms.startDay = this.modal.startDay.toLocaleDateString();
        parms.endDay = this.modal.endDay.toLocaleDateString();
        parms.room = this.modal.selectRoom;
        parms.costTypeId = this.modal.selectCostTypeId;
        console.log(parms);
        this.postRequest("/api/bill/saveOrUpdate", parms).then(res => {
            this.$refs["formModal"].resetFields();
            this.tableLoading = false;
            if (res.code == 20000) {
                this.formLoading = false;
                this.formVisible = false;
                this.$Message.success("保存成功！");
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //取消
    let onCancel = function () {
        this.$refs["fileform"].resetFields();
        this.$refs["formModal"].resetFields();
        this.modalImportBill = false;
        this.exportBill = false;
        this.formLoading = false;
        this.formVisible = false;
        this.$refs["formDelete"].resetFields();
        this.formLoading = false;
        this.formDeleteVisible = false;
        this.$refs["formDelete"].resetFields();
        this.formLoading = false;
        this.formSyncVisible = false;
        this.tbrkBill = false;
        this.batchBill = false;
        this.$refs["synchronousBill"].resetFields();
        this.$refs["billList"].resetFields();
        this.billList.id = '';
        this.billList.accountPeriod = '';
        this.costType = '';
        this.$refs.upload.clearFiles();
        this.modifyVisible = false;
    };
    //删除
    let deleteBill = function (id) {
        this.getRequest("/api/bill/deleteById?id=" + id).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.$Message.success("删除成功!");
                this.loadData();
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //打开批量删除条件弹窗
    let deleteBillAll = function () {
        this.groupNameList = [];
        this.buildList = [];
        this.unitList = [];
        this.roomList = [];
        this.modalDelete = {};
        this.modalDelete_room = "";
        this.tableLoading = false;
        this.formDeleteVisible = true;
    };
    //批量删除确定
    let deleteBillAllSubmit = function () {
        let params = this.modalDelete;
        params.room = this.modalDelete_room;
        let url = "/api/bill/deleteBillAll";
        this.postRequest(url, params).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.formLoading = false;
                this.formDeleteVisible = false;
                this.$Message.success("删除成功!");
                this.loadData();
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //导入账单
    let importBill = function () {
        this.postRequest("/common/checkImport?lockStatus=bill").then(res => {
            if (res.code == 20000) {
                this.loadMode = true;
                this.loadingInfo = true;
                this.timer = setInterval(() => {
                    this.postRequest("/common/checkImport?lockStatus=bill").then(res => {
                        console.log(res);
                        if (res.code == 20000) {
                            this.msgInfo = res.data;
                        }
                    });
                }, 2000)
            } else {
                this.modalImportBill = true;
            }
        });
    };
    //导出账单
    let exportExcel = function () {
        if (this.filters.housingId == "") {
            this.$Message.error({
                content: "请选择一个小区进行导出",
                duration: 5
            });
        } else {
            window.location.href = baseURL + "/common/exportExcel?" + qs.stringify(this.filters);
        }
    };
    //下载账单信息导入模板
    let download = function () {
        let url = "http://oss.siyueluo.com/template/%E8%B4%A6%E5%8D%95%E4%BF%A1%E6%81%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
        window.location.href = url;
    };
    //批量生成账单
    let handlebill = function () {
        this.$refs["billList"].validate(valid => {
            if (valid) {
                let pa = {}
                pa.housingId = this.billList.housingId;
                this.postRequest("/api/bill/billNumb", pa).then(res => {
                    console.log(res)
                    this.$Modal.confirm({
                        title: '提示',
                        content: '<p>批量生成账单的数量是' + res.data + '</p>',
                        onOk: () => {
                            let params = this.billList;
                            params.endDay = moment(this.billList.endDay).format("YYYY-MM-DD");
                            let url = "/api/bill/batchBill";
                            this.postRequest(url, params).then(res => {
                                this.tableLoading = false;
                                console.log(res)
                                if (res.code == 20000) {
                                    clearInterval(this.timer)
                                    this.postRequest("/common/clearImport?lockStatus=batchBill").then(res => {
                                        this.loadBatchMode = false;
                                    });
                                    this.formLoading = false;
                                    this.batchBill = false;
                                    this.$Message.success({
                                        content: res.data,
                                        duration: 5
                                    });
                                } else {
                                    clearInterval(this.timer)
                                    this.postRequest("/common/clearImport?lockStatus=batchBill").then(res => {
                                        this.loadBatchMode = false;
                                    });
                                    this.$Message.error({
                                        content: res.message,
                                        duration: 5
                                    });
                                }
                                this.onCancel();
                            });
                        }
                    });
                })
                this.timer = setInterval(() => {
                    this.batchBill = false;
                    this.loadingInfo = true;
                    this.loadBatchMode = true;
                    this.postRequest("/common/checkImport?lockStatus=batchBill").then(res => {
                        console.log(res);
                        if (res.code == 20000) {
                            this.batchInfo = res.data;
                        }
                    });
                }, 2000)
            }
        });
    };



    import moment from "moment"
    import qs from "qs"

    export default {
        name: "houseList",
        components: {
            Treeselect
        },
        data() {
            return {
                money: {},
                synchronousBill: {},
                billList: {},
                tbrkBill: false,
                batchBill: false,
                formInline: {},
                remarkInput: "",
                name: "",
                //查询条件
                filters: {
                    housingId: '',
                    payStatus: '1',
                },
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,
                //新增或修改
                modal: {
                    selectRoom: '',
                    selectCostTypeId: '',
                },
                //删除条件
                modalDelete: {},
                //导入账单
                filemodal: {},
                //导出账单条件
                modalBill: {},
                //表格数据
                tableData: [],
                //数据表格隐藏状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                //删除条件
                formDeleteVisible: false,
                //同步条件
                formSyncVisible: false,
                //导入账单
                modalImportBill: false,
                //导出账单
                exportBill: false,
                //表单提交状态
                formLoading: false,
                //备注model
                modelRemarks: {},
                payStatus: [],
                status: [],
                houseList: [],
                monthsList: [{id: "1", name: "一个月"}, {id: "2", name: "两个月"}, {id: "3", name: "三个月"},
                    {id: "4", name: "四个月"}, {id: "5", name: "五个月"}, {id: "6", name: "六个月"},
                    {id: "7", name: "七个月"}, {id: "8", name: "八个月"}, {id: "9", name: "九个月"},
                    {id: "10", name: "十个月"}, {id: "11", name: "十一个月"}, {id: "12", name: "十二个月"}],
                groupNameList: [],
                buildList: [],
                unitList: [],
                roomList: [],
                room: [],
                // modal_room: '',
                filters_room: "",
                modalDelete_room: "",
                costType: [],
                //上传文件
                dataFile: {},
                //文件上传地址
                act: act,
                token: token,
                fileList: [],
                multipleSelection: [],
                wwkRoom: {},
                wwkBillList: [],
                wwkTotalAmount: "--",
                wwkFile: {
                    room: {},
                    billList: [],
                    totalAmount: '',
                    payType: '',
                },
                wwkSelectList: [],
                //    导入账单
                loadMode: false,
                msgInfo: {},
                loadingInfo: false,
                timer: null,
                formModal: {
                    selectRoom: '',
                    selectCostTypeId: '',
                },
                modifyVisible: false,
                modifyModal: {},
                allInof: {},
                loadBatchMode:false,
                batchInfo:{}
            };
        },
        created: function () {
            this.gethouse();
        },
        methods: {
            loadData,
            getCostType,
            gethouse,
            housechange,
            groupNamechange,
            buildingchange,
            unitchange,
            handleAdd,
            handleSubmit,
            save,
            onCancel,
            deleteBill,
            deleteBillAll,
            deleteBillAllSubmit,
            importBill,
            exportExcel,
            download,
            handlebill,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //查询
            handleQuery(name) {
                this.loadData();
            },
            //文件上传
            submitUpload() {
                this.$refs["fileform"].validate(valid => {
                    if (valid) {
                        if (this.file == null) {
                            this.$Message.error("请点击需要上传文件");
                        } else {
                            this.dataFile.housingId = this.filemodal.housingId;
                            this.$refs.upload.submit();
                            //打开loading模态框
                            this.modalImportBill = false;
                            this.loadingInfo = true;
                            this.loadMode = true;
                            this.timer = setInterval(() => {
                                this.postRequest("/common/checkImport?lockStatus=bill").then(res => {
                                    console.log(res);
                                    if (res.code == 20000) {
                                        this.msgInfo = res.data;
                                    }
                                });
                            }, 2000)
                        }
                    }
                });
            },
            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePreview(file) {
                this.file = file;
            },
            filesuccess(response, file) {
                if (response.code == 20000) {
                    clearInterval(this.timer)
                    this.postRequest("/common/clearImport?lockStatus=bill").then(res => {
                        this.loadMode = false;
                    });
                    this.$notify.success({
                        title: "我的账单>导入账单",
                        message: response.message,
                        duration: 0
                    });
                } else {
                    clearInterval(this.timer)

                    this.postRequest("/common/clearImport?lockStatus=bill").then(res => {
                        this.loadMode = false;
                    });
                    this.$notify.error({
                        title: "我的账单>导入账单",
                        message: response.message,
                        duration: 0
                    });
                }
                this.$refs.upload.clearFiles();
            },
            filefail(response) {
                this.postRequest("/common/clearImport?lockStatus=bill").then(res => {
                    this.loadMode = false;
                });
                this.onCancel();
                this.$Modal.error({
                    title: "上传失败",
                    content: "请稍后再试"
                });
                this.$refs.upload.clearFiles();
            },
            //row 按钮-修改
            lyModify: function (row) {
                this.getRequest("/api/bill/openModel?id=" + row.id).then(res => {
                    console.log(res);
                    if (res.code == 20000) {
                        this.modifyVisible = true;
                        if (res.data.room) {
                            this.allInof = res.data;
                            this.modifyModal = res.data.bill;
                        }
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });

            },
            //row 按钮-删除
            lyDelete: function (row) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.deleteBill(row.id);
                    },
                    onCancel: () => {
                        // this.$Message.info('Clicked cancel');
                    }
                });
            },
            //同步按钮确认按钮
            submitSynchronous: function () {
                this.$refs["synchronousBill"].validate(valid => {
                    if (valid) {
                        this.postRequest("/alipay/getArrearsList?housingId=" + this.synchronousBill.housingId).then(res => {
                            console.log(res);
                            if (res.code == 20000) {
                                this.formLoading = false;
                                this.tbrkBill = false;
                                this.$Message.success({
                                    content: "成功导入" + res.data + "条数据",
                                    duration: 5
                                });
                                this.$refs["synchronousBill"].resetFields();
                            } else {
                                this.formLoading = false;
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });

                    }
                });
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //    确认导入进度框
            btnSure: function () {
                clearInterval(this.timer);
                this.msgInfo = {},
                    this.loadingInfo = false;
                this.loadMode = false;
                this.loadBatchMode = false;
            },
            //  修改确认按钮
            modifySure: function (row) {
                this.$refs["modifyModal"].validate(valid => {
                    if (valid) {
                        const parms = {
                            id: row.bill.id,
                            housingId: row.room.housingId,
                            groupName: row.room.groupName,
                            building: row.room.building,
                            unit: row.room.unit,
                            room: row.room.room,
                            costTypeId: this.modifyModal.costTypeId,
                            roomId: this.modifyModal.roomId,
                            accountPeriod: this.modifyModal.accountPeriod,
                            startDay: moment(this.modifyModal.startDay).format("YYYY-MM-DD"),
                            endDay: moment(this.modifyModal.endDay).format("YYYY-MM-DD"),
                            amount:this.modifyModal.amount,
                        }
                        console.log(parms);
                        this.postRequest("/api/bill/saveOrUpdate", parms).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.formLoading = false;
                                this.formVisible = false;
                                this.modifyVisible = false;
                                this.$Message.success("保存成功！");
                                this.loadData();
                            } else {
                                this.formLoading = false;
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });

            },
        },
        destroyed() {
            clearInterval(this.timer);
        },
    };
</script>

<style lang="less" scoped>
    #lyPage {
        display: inline-block;
    }

    .moneybox {
        font-szie: 16px;
        background: #f0faff;
        border: 1px solid #abdcff;
        border-radius: 4px;
        padding: 8px 48px 8px 8px;
        margin-bottom: 10px;
        span {
            padding-left: 10px;
        }
        em {
            color: red;
            font-style: normal;
        }
    }

    .info {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .p-info {
        text-align: center;
        font-size: 14px;
        line-height: 40px;
    }

</style>
